<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <meta name="Description" Content="申振升的个人博客网站">
  <meta name="Keywords" Content="申振升"/>  
  <title>像素尺</title>
  <link  rel="stylesheet" href="../../index.css"/>  
</head>
<body onresize="Size()">
  <div id="MyExample"><div id="Moule">
    <div class="FontCenter">模具设计与制造</div>
    <ul class="example">
        <li><a href="https://memorykill.github.io/example/FeFe3c/index.html">铁碳合金相图</a></li>
    </ul>
  </div>

  <div id="Web">
      <div class="FontCenter">前端设计师</div>
      <ul class="example">
          <li><a href="https://memorykill.github.io/example/roundPage/index.html">轮播图</a></li>
          <li><a href="https://memorykill.github.io/example/picRuler/index.html">像素尺</a></li>
      </ul>
  </div></div> 

<div class="content">
 <div><h2>前端设计</h2></div>      
 <h3>网页组件</h3> 
 <p>像素尺|你的屏幕有多宽</p>
</div>
 
<svg id="Size" version="1.1" baseProfile="full" width="1000" height="20" xmlns="http://www.w3.org/1999/svg">
    <path d="M50 0 L 0 10 L 50 20 z" />
    <path d="M50 10 L 1000 10 " stroke="black"/>
    <path d="M1000 10 L 950 0 L 950 20" />
    <text x="50%" y="10" font-size="10" text-anchor="middle" fill="white">1124px</text>
</svg>

<script src="js/picRuler.js"></script>
</body>
</html>
